<template>
  <div class="login-container">
    <div class="login-header">
      <img src="../assets/Logo.png" alt="辉瑞制药" class="logo" />
      <h1>员工车位预约管理系统</h1>
    </div>
    <a-card class="login-card" :bordered="false">
      <template #title>
        <div class="card-title">系统登录</div>
      </template>
      <a-form
        :model="formState"
        name="login"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }"
        autocomplete="off"
        @finish="onFinish"
        size="large"
      >
        <a-form-item
          label="用户名"
          name="username"
          :rules="[{ required: true, message: '请输入用户名!' }]"
        >
          <a-input v-model:value="formState.username" size="large">
            <template #prefix>
              <user-outlined />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item
          label="密码"
          name="password"
          :rules="[{ required: true, message: '请输入密码!' }]"
        >
          <a-input-password v-model:value="formState.password" size="large">
            <template #prefix>
              <lock-outlined />
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item name="remember" :wrapper-col="{ offset: 5, span: 19 }">
          <a-checkbox v-model:checked="formState.remember" size="large">记住我</a-checkbox>
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 5, span: 19 }">
          <a-button type="primary" html-type="submit" class="login-button" :loading="loading" size="large">
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <div class="login-footer">
      <p>© 2023 辉瑞制药有限公司 版权所有</p>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../store/user';
import { login } from '../api/index'; // 移除 addManager 导入

const formState = reactive({
  username: '',
  password: '',
  remember: true,
});

const loading = ref(false);
const router = useRouter();
const userStore = useUserStore();

// 登录提交
const onFinish = async (values) => {
  loading.value = true;
  try {
    // 调用login API
    const response = await login({
      username: values.username,
      password: values.password
    });
    
    // 假设API返回格式为 { success: true, data: {...用户信息} }
    if (response && response.code === 200) {
      // 设置30天的过期时间
      const expiresAt = new Date();
      expiresAt.setDate(expiresAt.getDate() + 30); // 30天后过期
      
      // 存储用户信息到store
      userStore.setUser({
        ...response.data,
        expiresAt: expiresAt.getTime() // 存储过期时间戳
      });
      
      message.success('登录成功');
      router.push('/users');
    } else {
      message.error(response?.message || '用户名或密码错误');
    }
  } catch (error) {
    console.error('登录错误:', error);
    message.error('登录失败，请稍后再试');
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--bg-color, #f0f2f5);
  background-image: url('');
}

.login-header {
  margin-bottom: 40px;
  text-align: center;
}

.login-header .logo {
  width: 180px;
  margin-bottom: 16px;
}

.login-header h1 {
  color: var(--secondary-color, #0000C9);
  font-size: 28px;
  margin: 0;
}

.login-card {
  width: 400px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  background-color: var(--component-bg, #ffffff);
}

.card-title {
  text-align: center;
  color: var(--primary-color, #0095FF);
  font-size: 20px;
  font-weight: bold;
}

.login-button {
  width: 100%;
  background-color: var(--primary-color, #0095FF);
  border-color: var(--primary-color, #0095FF);
}

.login-footer {
  margin-top: 24px;
  color: rgba(0, 0, 0, 0.45);
}
</style> 